<template>
    <div class="sort">
        <van-cell-group class="module_panel">
				<van-cell icon="idcard" @click="showList" isLink v-if="rowDuration =='left'">
					<div slot="title">{{title}}:&nbsp;<span class="solo"><span class="soloName">{{sortObject.productName}}</span></span></div>
				</van-cell>
				<van-cell icon="idcard" arrow-direction="down" isLink @click="hideList" v-if="rowDuration =='down'">
					<div slot="title">{{title}}:&nbsp;<span class="solo"><span class="soloName">{{sortObject.productName}}</span>&nbsp;{{shortTitle}}</span></div>
				</van-cell>
				<van-cell v-if="rowDuration =='left'">
					<div slot="title">我的排名:&nbsp;&nbsp;<span>{{sortObject.total}}单</span><span class="soloMon">￥{{sortObject.pic}}</span><span>排<span class="rank">{{sortObject.rownum}}</span>名</span></div>
				</van-cell>
				<van-cell v-if="rowDuration =='down'">
					<ul class="soloList">
						<span v-if="dataArr.length <= 6">
							<li v-for="(item,index) in dataArr" :key="item.order">
								<span v-if="index<=2" style="width:100%;display:inline-block">
									<div v-if="index == placeMy" style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder">{{item.rownum}}</div>
											<div style="color:red"><span class="soloListName">我的销量</span></div>
										</div>
										<div style="float:right;width:50%;color:red"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
									<div v-else style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder">{{item.rownum}}</div>
											<div><span>{{item.mId}}</span>-<span class="soloListName">{{item.nickname}}</span></div>
										</div>
										<div style="float:right;width:50%"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
								</span>
								<span v-else style="width:100%;display:inline-block">
									<div v-if="index == placeMy" style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder" style="color:#cccccc">{{item.rownum}}</div>
											<div style="color:red"><span class="soloListName">我的销量</span></div>
										</div>
										<div style="float:right;width:50%;color:red"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
									<div v-else style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder" style="color:#cccccc">{{item.rownum}}</div>
											<div><span>{{item.mId}}</span>-<span class="soloListName">{{item.nickname}}</span></div>
										</div>
										<div style="float:right;width:50%"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
								</span>
							</li>
						</span>
						<span v-if="dataArr.length > 6">
							<li v-for="(item,index) in dataArr" :key="item.id" :class="(index < (placeMy-1)&& index >3)?'hide':''">
								<span v-if="index<3" style="width:100%;display:inline-block">
									<div v-if="index == placeMy" style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder">{{item.rownum}}</div>
											<div style="color:red"><span class="soloListName">我的销量</span></div>
										</div>
										<div style="float:right;width:50%;color:red"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
									<div v-else style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder">{{item.rownum}}</div>
											<div><span>{{item.mId}}</span>-<span class="soloListName">{{item.nickname}}</span></div>
										</div>
										<div style="float:right;width:50%"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
								</span>
								<span v-else-if="index==3" style="width:100%;display:inline-block">
									<div class="soloListOrder">...</div>
									<div>......</div>
								</span>
								<span v-else-if="index >= (placeMy-1)" style="width:100%;display:inline-block">
									<div v-if="index == placeMy" style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder" style="color:#cccccc">{{item.rownum}}</div>
											<div style="color:red"><span class="soloListName">我的销量</span></div>
										</div>
										<div style="float:right;width:50%;color:red"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
									<div v-else style="width:100%">
										<div style="float:left;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
											<div class="soloListOrder" style="color:#cccccc">{{item.rownum}}</div>
											<div><span>{{item.mId}}</span>-<span class="soloListName">{{item.nickname}}</span></div>
										</div>
										<div style="float:right;width:50%"><span class="soloListNum">{{item.total}}</span>单(<span>￥{{item.pic}}</span>)</div>
									</div>
								</span>
							</li>
						</span>
					</ul>
				</van-cell>
			</van-cell-group>
    </div>
</template>

<script>
import {SHOP_APPOINT_PRODUCT,SHOP_APPOINT_CATEGORY} from "@/api/user"
export default {
    name:'user-sale-sort',
    props:['sortObject',"shortTitle","title"],
    data(){
        return{
			memberId: this.getUser().id,
			centreId: this.getUser().centreId,
			rowDuration:"left",//箭头方向
			dataArr: [],//接受数据
			dataMy:[],//保存我的数据
			placeMy:''//纪录1我的位置
        }
	},
	// created(){
	// 	this.getSoloOrder();
	// 	this.getCateOrder();
	// },
    methods:{
		// 获取单品的排名
		getSoloOrder(){
			this.$reqPost(SHOP_APPOINT_PRODUCT,{centerId: this.centreId,memberId:this.memberId }).then(res=>{
				if (res.status == 200) {
					this.dataArr = res.data.data.productSale
					this.dataMy = res.data.data.selfSale;
					for (let i =0; i< this.dataArr.length; i++) {
						if (this.dataArr[i].rownum == this.dataMy.rownum) {
							this.placeMy = i;
						}
					}
				}
			});
		},
		// 获取分类的排名
		getCateOrder(){
			this.$reqPost(SHOP_APPOINT_CATEGORY,{centerId: this.centreId,memberId:this.memberId }).then(res=>{
				if (res.status == 200) {
					this.dataArr = res.data.data.categorySale
					this.dataMy = res.data.data.selfSale;
					for (let i =0; i< this.dataArr.length; i++) {
						if (this.dataArr[i].rownum == this.dataMy.rownum) {
							this.placeMy = i;
							console.log("我的名次:"+this.placeMy)
						}
					}
				}
			});
		},
        // 展示单品列表
        showList(){
			this.rowDuration = "down"
			//请求数据
			if (this.title == "单品销售排行") {
				this.getSoloOrder();
			} else {
				this.getCateOrder();
			}
        },
        // 展示列表
        hideList(){
            this.rowDuration = "left"
        },
    }
}
</script>

<style scoped lang="scss">
    .sort {
        margin-bottom: 10px;
        .solo {
			font-weight: 900;
			.soloName {
				margin: 0 5px;
			}
		}
		.soloMon {
			margin: 0 20px;
		}
		.rank {
			color: #ff3366;
		}
		.soloList {
			margin-top: 15px;
			padding-left: 10px;
			color: #333;
			li {
				height: 30px;
				div {
					display: inline-block;
					font-size: 14px;
					height: 100%;	
				}
				.soloListOrder {
					padding: 0 10px;
					box-sizing: border-box;
					width: 43px;
					height: 18px;
					line-height: 18px;
					color: #fff;
					background-color: #999;
					border-radius: 10px;
				}
				.soloListNum {
					color: #ff3366;
					margin-left: 10px;
				}
				.soloListName {
					font-weight: 900;
				}
			}
		}
	}
	.hide {
		display: none;
	}
</style>
